import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIconModules from '@element-plus/icons'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import request from './utils/request'
import storage from './utils/storage'
import api from './api'
import store from './store'
import * as ECharts from 'echarts'
import VueECharts from 'vue-echarts'

console.info('环境变量=>', import.meta.env)

const app = createApp(App)

// 全局指令
app.directive('has', {
  beforeMount: (el, binding) => {
    // 获取按钮权限,注意按钮的key不可以重复,必须是唯一
    let actionList = storage.getItem('actionList')
    // 获取质量的值
    let value = binding.value
    // 判断列表中是否有对应的按钮权限标识
    let hasPermission = actionList.includes(value)
    // 没有按钮权限就隐藏删除掉
    if (!hasPermission) {
      // 隐藏按钮
      el.style = 'display:none'
      // 在 beforeMount 我们直接删除节点是删除不掉的，因为它还没有渲染到真正的 DOM 里面去 所以需要通过异步来实现
      setTimeout(() => {
        el.parentNode.removeChild(el)
      }, 0)
    }
  }
})
app.config.globalProperties.$request = request // 全局挂载
app.config.globalProperties.$storage = storage // 全局挂载
app.config.globalProperties.$api = api // 全局挂载
app.config.globalProperties.$ECharts = ECharts // 全局挂载
for (let iconName in ElIconModules) {
  app.component(iconName, ElIconModules[iconName])
}
app.component('v-chart', VueECharts)
app.use(router).use(store).use(ElementPlus, { size: 'small', locale: zhCn }).mount('#app')

